<template>
  <a-modal width="700px" :footer="null" :maskClosable="false" :closable="false" :mask="false" v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }">
    <template #title>
      <modalTitle @close="close" :title="'事件详情'"></modalTitle>
    </template>
    <div style="padding:0 10px 10px 10px;" v-if="info">
      <a-row :gutter="10">
        <a-col :span="14">
          <div class="content">
            <div class="content_title">
              <div class="content_title_type">{{ info.appear_type }}</div>
              <div class="content_title_state">{{ info.is_solve == 1 ? '待处理' : info.is_solve == 2 ? '已处理' : '处理中' }}
              </div>
            </div>
            <div class="content_info">
              <div class="content_info_item">
                <div class="content_info_item_label">联系人</div>
                <div class="content_info_item_value">{{ info.name }}</div>
              </div>
              <div class="content_info_item">
                <div class="content_info_item_label">联系电话</div>
                <div class="content_info_item_value">{{ info.phone }}</div>
              </div>
              <div class="content_info_item">
                <div class="content_info_item_label">诉求时间</div>
                <div class="content_info_item_value">{{ info.createtime }}</div>
              </div>
              <div class="content_info_item" style="width: 100%;">
                <div class="content_info_item_label">详细地址</div>
                <div class="content_info_item_value">{{ info.event_address }}</div>
              </div>
            </div>
            <div style="padding: 10px 0;">
              <div style="font-size: 12px; ">诉求内容：{{ info.content }}</div>
            </div>
            <div style="padding: 10px 0; display:flex;flex-wrap: wrap;" v-if="info.material_files">
              <div v-for="(item, i) in info.material_files" :key="i"
                style="width: 80px; height:80px; border-radius: 5px; margin:0 5px 5px 0;">
                <a-image :src="item" style="width: 80px; height:80px; border-radius: 5px;" />
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="10">
          <div class="content" style="height: 100%;">
            <div style="font-size: 14px; margin-bottom:10px;">处理进度</div>
            <div v-for="(item, i) in info.record" :key="i">
              <div style="display: flex; align-items: center;">
                <div style="width: 8px; height:8px; background:#48FFFF;border-radius: 50%;"></div>
                <div style="margin:0 10px; font-size:12px;">{{ item.now_organization_name }}</div>
                <div style="font-size:10px; color:#FFFFFF99;margin-right: 10px;">{{ item.imcreatetime }}</div>
                <div style="font-size:10px; color:#FFFFFF99;background: #C29200;border-radius: 4px;padding: 2px 6px;">
                  已解决
                </div>
              </div>
              <div style="font-size: 10px; padding:5px 0 10px 13px; margin-left: 3px; border-left: 2px solid #48FFFF;">
                {{ item.appeal_content }}
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>
<script setup>
import $api from "@/utils/request.js"
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"

const modalShow = ref(false)

const emit = defineEmits(["close"])
const close = () => {
  modalShow.value = false
  emit("close")
}
const id = ref(0)
const info = ref(null)
const getInfo = async () => {
  const res = await $api.get("/api/index/get_appeal_detail", { id: id.value })
  if (res.code === 1) {
    info.value = res.data
    // data:image/png;base64,
    if (info.value.material_files) {
      const arr = info.value.material_files.split(",")
      // eslint-disable-next-line array-callback-return
      info.value.material_files = arr.map((e) => {
        if (e.indexOf("http") > -1) {
          return e
        }
        if (e.indexOf("/uploads") > -1) {
          return "http://ylz.chuangxing.ren/" + e
        }
        return "data:image/png;base64," + e
      })
    }
  }
}
const show = (e) => {
  id.value = e.id
  getInfo()
  modalShow.value = true
}

defineExpose({ show, close })
</script>
<style scoped lang="less">
.content {
  background: #4DDECF1A;
  padding: 10px 16px;
  border: 1px solid #4DDECF33;
  border-radius: 10px;
  color: #FFFFFF;
  width: 100%;

  .content_info {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid #FFFFFF26;

    .content_info_item {
      width: 33%;
      margin-top: 5px;

      .content_info_item_label {
        font-size: 10px;
      }

      .content_info_item_value {
        font-size: 13px;
        // font-weight: bold;
      }
    }
  }

  .content_title {
    display: flex;
    align-items: center;

    .content_title_type {
      border-radius: 4px;
      border-width: 1px;
      padding-top: 2px;
      padding-right: 6px;
      padding-bottom: 2px;
      padding-left: 6px;
      gap: 10px;
      font-size: 12px;
      background: #00667D;
      border: 1px solid #00C6CD
    }

    .content_title_state {
      border-radius: 4px;
      // border-width: 1px;
      padding-top: 2px;
      padding-right: 6px;
      padding-bottom: 2px;
      padding-left: 6px;
      gap: 10px;
      font-size: 12px;
      background: #C29200;
      border: 1px solid #C29200;
      margin-left: 10px;
    }
  }

}
</style>
